<template>
	<span class="support-ico" :class="imgClass"></span>
</template>

<script type="text/javascript">
	export default {
		name: 'supportIco',
		props: {
			size: {
				type: Number
			},
			type: {
				type: Number
			}
		},
		computed: {
			imgClass() {
				const classMap = ['decrease','discount','guarantee','invoice','special']
				return `icon-${this.size} ${classMap[this.type]}`
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '../../common/stylus/mixin.styl'
	.support-ico
		display: inline-block
		background-repeat: no-repeat

	.icon-1
		width: 12px
		height: 12px
		background-size: 12px 12px
		&.decrease
			bg-image('decrease_1')
		&.discount
			bg-image('discount_1')
		&.guarantee
			bg-image('guarantee_1')
		&.invoice
			bg-image('invoice_1')
		&.special
			bg-image('special_1')

	.icon-2
		width: 16px
		height: 16px
		background-size: 16px 16px
		&.decrease
			bg-image('decrease_2')
		&.discount
			bg-image('discount_2')
		&.guarantee
			bg-image('guarantee_2')
		&.invoice
			bg-image('invoice_2')
		&.special
			bg-image('special_2')

	.icon-3
		width: 12px
		height: 12px
		background-size: 12px 12px
		&.decrease
			bg-image('decrease_3')
		&.discount
			bg-image('discount_3')
		&.guarantee
			bg-image('guarantee_3')
		&.invoice
			bg-image('invoice_3')
		&.special
			bg-image('special_3')

	.icon-4
		width: 16px
		height: 16px
		background-size: 16px 16px
		&.decrease
			bg-image('decrease_4')
		&.discount
			bg-image('discount_4')
		&.guarantee
			bg-image('guarantee_4')
		&.invoice
			bg-image('invoice_4')
		&.special
			bg-image('special_4')
	

</style>